<template>
    <div class="nav">
        <div class="navItem" v-for="(item, index) in navList" @click="clickHandler(index)" :key="item"
            :class="index === val ? 'active' : ''">
            {{ item }}
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const val = ref(0)
const navList = ref(['推文', '发帖', '登录'])

const clickHandler = function (index) {
    val.value = index
    if(index == 0) {
        router.push({
            path:'/'
        })
    }else if(index==1) {
         router.push({
            path:'/writer'
        })
    }else{
         router.push({
            path:'/login'
        })
    }
}

onMounted(()=>{
    let token = localStorage.getItem('token')
    if(token!==null) {
        navList.value[2] ='退出登录'
    }
})
</script>

<style lang="scss" scoped>
.main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: auto;
    min-height: 600px;
}

.nav {
    height: 60px;
    width: 560px;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    border: 3px solid rgb(70,70,70);
     border-radius: 60px;
    .navItem {
        flex-grow: 1;
        background-color: rgb(17,17,17);
        font-family: 'zzz-font';
        font-size: calc(100vh * 1 / 1920);
        line-height: 60px;
        text-align: center;
        color: #fff;
    }

    .navItem:first-child {
        border-radius: 60px 0px 0px 60px;

    }

    .navItem:last-child {
        border-radius: 0px 60px 60px 0px;

    }
}
.active {
    flex-grow: 2 !important;
    background-color: rgb(221, 210, 0) !important;
    color: #000 !important;
    box-shadow: 0px 4px 51px 0px rgba(221, 210, 0, 0.3);
}

</style>